<template>
  <div>
    <el-form :model="config">      
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 数据 -->
        <el-tab-pane label="数据管理" name="apiconfig">
          <el-form-item label="接口地址">
            <el-input v-model="config.api.url"></el-input>            
          </el-form-item>
          <el-form-item label="接口method">
            <el-input  v-model="config.api.method"></el-input>
          </el-form-item>
          <el-form-item label="返回结果字段">
            <el-input v-model="config.api.resultDataField"></el-input>
          </el-form-item>          
        </el-tab-pane>
        <!-- 表格 -->
        <el-tab-pane label="表格管理" name="tableconfig">
          <el-button @click="addColumn">添加列</el-button>
          <el-table :data="config.table.columns" border style="width: 100%">
            <el-table-column label="列名" prop="name"></el-table-column>
            <el-table-column label="表头" prop="label"></el-table-column>
            <el-table-column label="接口字段" prop="field"></el-table-column>
            <el-table-column label="数据类型" prop="dataType"></el-table-column>
            <el-table-column label="表现形式" prop="showType"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">                
                <el-button v-if="scope.$index>0" type="text" size="small" @click="up(config.table.columns,scope.$index)">上移</el-button>
                <el-button v-if="scope.$index<config.table.columns.length-1" type="text" size="small" @click="down(config.table.columns,scope.$index)">下移</el-button>
                <el-button type="text" size="small" @click="edit(scope)">编辑</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 按钮 -->
        <el-tab-pane label="按钮管理" name="buttonconfig">
          <el-button @click="addButton">添加按钮</el-button>
          <el-table :data="config.buttons.items" border style="width: 100%">
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column label="文字" prop="label"></el-table-column>
            <el-table-column label="类型" prop="type"></el-table-column>
            <el-table-column label="行为" prop="action"></el-table-column>
            <el-table-column label="路由" prop="route"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button v-if="scope.$index>0" type="text" size="small" @click="up(config.buttons.items,scope.$index)">上移</el-button>
                <el-button v-if="scope.$index<config.buttons.items.length-1" type="text" size="small" @click="down(config.buttons.items,scope.$index)">下移</el-button>
                <el-button type="text" size="small" @click="editButton(scope)">编辑</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 搜索 -->
        <el-tab-pane label="搜索管理" name="searchconfig">
          <el-form-item label="搜索接口字段">
            <el-input v-model="config.searchs.apiField"></el-input>            
          </el-form-item>
          <el-form-item label="inline形式">
            <!-- <el-input v-model="config.searchs.apiField"></el-input>             -->
            <el-switch v-model="config.searchs.inline"></el-switch>
          </el-form-item>
          <el-button @click="addSearch">添加搜索</el-button>
          <el-table :data="config.searchs.items" border style="width: 100%">
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column label="文字" prop="label"></el-table-column>
            <el-table-column label="字段" prop="apiField"></el-table-column>
            <el-table-column label="字段类型" prop="apiValueType"></el-table-column>
            <el-table-column label="显示类型" prop="showType"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">                    
                <el-button v-if="scope.$index>0" type="text" size="small" @click="up(config.searchs.items,scope.$index)">上移</el-button>
                <el-button v-if="scope.$index<config.searchs.items.length-1" type="text" size="small" @click="down(config.searchs.items,scope.$index)">下移</el-button>            
                <el-button type="text" size="small" @click="editSearch(scope)">编辑</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 分页 -->
        <el-tab-pane label="分页管理" name="pageconfig">
          <el-form-item label="启用">
            <el-switch v-model="config.pager.enable"></el-switch>
          </el-form-item>
          <el-form-item label="每页条数">
            <el-input v-model="config.pager.pagesize"></el-input>
          </el-form-item>
          <el-form-item label="接口每页条数字段">
            <el-input v-model="config.pager.apiPageSizeField"></el-input>
          </el-form-item>
          <el-form-item label="接口当前页字段">
            <el-input v-model="config.pager.apiCurrentPageField"></el-input>
          </el-form-item>

           <el-form-item label="返回每页条数字段">
            <el-input v-model="config.pager.pageSizeField"></el-input>
          </el-form-item>
          <el-form-item label="返回当前页字段">
            <el-input v-model="config.pager.currentPageField"></el-input>
          </el-form-item>
          <el-form-item label="返回记录条数字段">
            <el-input v-model="config.pager.totalField"></el-input>
          </el-form-item>
          <el-form-item label="分页布局">
            <el-input v-model="config.pager.layout"></el-input>
          </el-form-item>
          <el-form-item label="每页条数下拉选项">
            <el-input v-model="config.pager.pageSizes"></el-input>
          </el-form-item>
        </el-tab-pane>
        <!-- 预览 -->
        <el-tab-pane label="预览" name="preview">
          <list-comp ref="rp" :configa="config"></list-comp>
        </el-tab-pane>
      </el-tabs>      
      <el-form-item>
        <el-button @click="updateConfig">确定</el-button>
      </el-form-item>
    </el-form>
    <!-- 添加表格字段弹窗 -->
    <el-dialog title="表格字段" :visible.sync="addTableColumnDialog">
      <el-form :model="tempTableColumn">
        <el-form-item label="名称">
          <el-input v-model="tempTableColumn.name"></el-input>
        </el-form-item>
        <el-form-item label="表头">
          <el-input v-model="tempTableColumn.label"></el-input>
        </el-form-item>
        <el-form-item label="接口字段">
          <el-input v-model="tempTableColumn.field"></el-input>
        </el-form-item>
        <el-form-item label="数据类型">
          <!-- <li v-for="item in dataTypes">{{item}}</li> -->
          <el-select v-model="tempTableColumn.dataType">
            <el-option v-for="x in dataTypes" :label="x" :value="x" :key="x"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="表现形式">
          <el-select v-model="tempTableColumn.showType">
            <el-option v-for="x in listShowTypes" :label="x.label" :value="x.id" :key="x.id"></el-option>
          </el-select>
          <editor ref="editor" v-if="tempTableColumn.showType>0" :id="tempTableColumn.showType" v-model="tempTableColumn.showConfig"></editor>
          <!-- {{tempTableColumn.showConfig}} -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addTableColumnDialog = false">取 消</el-button>
        <el-button type="primary" @click="doAddTableColumn">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加按钮弹框 -->
    <el-dialog title="按钮" :visible.sync="addButtonDialog">
      <el-form :model="tempButton">
        <el-form-item label="名称">
          <el-input v-model="tempButton.name"></el-input>
        </el-form-item>
        <el-form-item label="文字">
          <el-input v-model="tempButton.label"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="tempButton.type">
            <el-option v-for="item in buttonTypes" :label="item.name" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="尺寸">
          <el-select v-model="tempButton.size">
            <el-option v-for="item in sizes" :label="item.name" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否行按钮">
          <el-switch v-model="tempButton.rowButton"></el-switch>
        </el-form-item>
        <el-form-item label="是否需要确认">
          <el-switch v-model="tempButton.confirm"></el-switch>
        </el-form-item>
        <el-form-item label="确认文字">
          <el-input v-model="tempButton.confirmText"></el-input>
        </el-form-item>        
        <el-form-item label="行为">
          <el-select v-model="tempButton.action">
            <el-option v-for="item in buttonActions" :label="item.name" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="路由/接口">
          <el-input v-model="tempButton.route"></el-input>
        </el-form-item>
        <el-form-item label="api方法">
          <el-input v-model="tempButton.apimethod"></el-input>
        </el-form-item>
        <el-form-item label="自定义脚本">
          <el-input type="textarea" v-model="tempButton.script"></el-input>
          <div>提示:自定义中可以用的变量有</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addButtonDialog = false">取 消</el-button>
        <el-button type="primary" @click="doAddButton">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 搜索编辑弹出框 -->
    <el-dialog title="按钮" :visible.sync="addSearchDialog">
      <el-form :model="tempSearch">
        <el-form-item label="名称">
          <el-input v-model="tempSearch.name"></el-input>
        </el-form-item>
        <el-form-item label="文字">
          <el-input v-model="tempSearch.label"></el-input>
        </el-form-item>
        <el-form-item label="宽度">
          <el-slider v-model="tempSearch.width" :min="1" :max="24"></el-slider>
        </el-form-item>
        <el-form-item label="接口字段">
          <el-input v-model="tempSearch.apiField"></el-input>
        </el-form-item>
        <el-form-item label="字段类型">
          <!-- <el-input v-model="tempSearch.apiValueType"></el-input> -->
          <el-select v-model="tempSearch.apiValueType">
            <el-option v-for="x in dataTypes" :label="x" :value="x" :key="x"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="显示类型">
          <!-- <el-input v-model="tempSearch.showType"></el-input> -->
          <el-select v-model="tempSearch.showType">
            <el-option v-for="x in listShowTypes" :label="x.label" :value="x.id" :key="x.id"></el-option>
          </el-select>
          <editor ref="editor" v-if="tempSearch.showType>0" :id="tempSearch.showType" v-model="tempSearch.showConfig"></editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addSearchDialog = false">取 消</el-button>
        <el-button type="primary" @click="doAddSearch">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//列表页config配置页面
import axios from 'axios'
import listComp from '../components/listComp.vue'
import editor from '../editors/componentPropertiesEditor.vue'
export default {
  components: { listComp,editor },  
  async created(){
    var id=this.$route.params.id

    await axios.get("http://localhost:8811/api/ShowTypeComponente/GetAll").then(rep=>{
      this.listShowTypes=rep.data.result
    })

    await axios.get("http://localhost:8811/api/DynamicPage/GetOne/"+id).then(rep=>{
      var r=rep.data.result.pageConfig      
      if(r==null || r==''){        
        this.config={
          api:{
            url:"",
            method:"GET",
            resultDataField:""          
          },
          pager:{
            enable:true,
            pagesize:10,
            layout:"total, sizes, prev, pager, next, jumper",
            totalField:"",
            pageSizeField:"",
            pageSizes:"[100, 200, 300, 400]",
            currentPageField:"",
            apiPageSizeField:"",
            apiCurrentPageField:""
          },
          buttons:{
            items:[]
          },
          searchs:{
            apiField:"",
            items:[]
          },
          table:{
            columns:[]
          }
        }
        // console.log(this.config);
      }
      else{
        this.config=JSON.parse(r)
      }
    })
  },
  methods:{
    async updateConfig(){
      //调用接口保存数据
      var id=this.$route.params.id
      var url="http://localhost:8811/api/dynamicpage/updateconfig/"
      await axios.post(url,{id:id,pageConfig:JSON.stringify(this.config)}).then(rep=>{
        this.$message({
          message: 'updated',
          type: 'success'
        });
        // console.log('更新接口调用');
        // console.log(rep);
      })
    },
    up(arr,index){
      //table中的行上下排序 向上
      if(index<1) return
      var temp=arr[index]
      this.$set(arr,index,arr[index-1])
      this.$set(arr,index-1,temp)
    },
    down(arr,index){
      //table中的行上下排序 向下
      if(index>=arr.length) return
      var temp=arr[index]
      this.$set(arr,index,arr[index+1])
      this.$set(arr,index+1,temp)
    },
    handleClick(tab) {
      //tab标签切换，当切换到preview标签时，重新渲染列表页
        if(tab.name=='preview'){                    
          this.$refs.rp.refresh()
        }
      },
    addColumn(){
      //弹出 添加表格字段
      this.addTableColumnDialog=true
      this.tempTableColumn={}
      this.editIndex=-1
    },
    doAddTableColumn(){
      // var cfg=this.$refs.editor.get()
      // this.tempTableColumn.showConfig=cfg
      // console.log(this.tempTableColumn);
      //执行添加表格字段
      if(this.editIndex==-1){
        this.config.table.columns.push(this.tempTableColumn)
      }
      else{
        this.config.table.columns[this.editIndex]=this.tempTableColumn
      }
      this.addTableColumnDialog=false
    },
    addButton(){
      //弹出 添加按钮
      this.addButtonDialog=true
      this.tempButton={}
      this.editIndex=-1
    },
    addSearch(){
      //弹出 添加搜索
      this.addSearchDialog=true
      this.tempSearch={}
      this.editIndex=-1
    },
    doAddButton(){
      //执行 添加按钮
      if(this.editIndex==-1){
        this.config.buttons.items.push(this.tempButton)
      }
      else{
        this.config.buttons.items[this.editIndex]=this.tempButton
      }
      this.addButtonDialog=false
    },
    doAddSearch(){
      // 执行添加搜索
      if(this.editIndex==-1){
        this.config.searchs.items.push(this.tempSearch)
      }
      else{
        this.config.searchs.items[this.editIndex]=this.tempSearch
      }
      this.addSearchDialog=false
    },
    edit(scope){
      //弹出 修改表格列
      // console.log(scope.$index);
      this.tempTableColumn=this.config.table.columns[scope.$index]
      this.addTableColumnDialog=true
      this.editIndex=scope.$index
    },
    editButton(scope){
      //弹出 修改按钮
      // console.log(scope.$index);
      this.tempButton=this.config.buttons.items[scope.$index]
      this.addButtonDialog=true
      this.editIndex=scope.$index
    },
    editSearch(scope){
      //弹出 修改搜索
      this.tempSearch=this.config.searchs.items[scope.$index]
      this.addSearchDialog=true
      this.editIndex=scope.$index
    }
  },
  data(){
    return{
      activeName:"apiconfig",
      addTableColumnDialog:false, //控制弹窗显示隐藏
      addButtonDialog:false, //控制弹窗显示隐藏
      addSearchDialog:false, //控制弹窗显示隐藏
      dataTypes:["string","number","date"],  //下拉框数据
      listShowTypes:[],  //下拉框数据
      buttonActions:[
        {name:"弹框",value:"dialog"},
        {name:"路由",value:"route"},
        {name:"跳页",value:"newpage"},
        {name:"调接口",value:"callapi"},
        {name:"自定义",value:"custom"},
      ],  //下拉框数据
      sizes:[
        {name:"medium",value:"medium"},
        {name:"small",value:"small"},
        {name:"mini",value:"mini"}
      ],  //下拉框数据
      buttonTypes:[
        {name:"primary",value:"primary"},
        {name:"success",value:"success"},
        {name:"info",value:"info"},
        {name:"warning",value:"warning"},
        {name:"danger",value:"danger"},
        {name:"text",value:"text"}
      ],  //下拉框数据
      // tempShowTypeId:0,
      editIndex:-1,
      tempTableColumn:{
        name:"",
        label:"",
        field:"",
        dataType:"",
        showType:"",        
        showConfig:{}
      },  //添加或编辑时的临时变量
      tempButton:{
        name:"",
        label:"",
        type:"",
        rowButton:false,
        confirm:false,
        confirmText:"",
        action:"",
        route:"",
        apimethod:"",
        script:"",
      }, //添加或编辑时的临时变量
      tempSearch:{
        name:"",
        label:"",
        inline:true,
        apiField:"",
        apiValueType:"",
        showType:"",
        width:24
      },  //添加或编辑时的临时变量
      config:{  
        api:{},
        pager:{},
        buttons:{
          items:[]
        },
        searchs:{
          apiField:"",
          items:[]
        },
        table:{
          columns:[]
        }
      }  //实际要存到库里的数据
    }
  }
}
</script>

<style>

</style>
